<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/code.js"></script>
  <script src="../js/cookie.js"></script>
  <style>
    #createCode {
      user-select: none;
    }

    .right {
      font-size: 12px;
      color: green;
    }

    .err {
      font-size: 12px;
      color: red;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>
      <label for="">用户名:</label>
      <input type="text" id="user">
      <span id="user_span"></span>
    </p>
    <p>
      <label for="">密&emsp;码:</label>
      <input type="password" id="pwd">
      <span id="pwd_span"></span>
    </p>
    <p>
      <label for="">手机号:</label>
      <input type="text" id="phone">
      <span id="phone_span"></span>
    </p>
    <p>
      <label for="">邮&emsp;箱:</label>
      <input type="text" id="email">
      <span id="email_span"></span>
    </p>
    <p>
      <label for="">验证码:</label>
      <input type="text" id="code">
      <span id="createCode">a1b2</span>
      <span id="code_span"></span>
    </p>
    <p>
      <input id="regBtn" type="submit" value="注册">
      <input id="retBtn" type="reset" value="取消">
    </p>
  </div>
</body>
<script>
  // 1. JS操作元素之前必须先获取元素
  var userInp = document.getElementById("user");
  var userSpan = document.getElementById("user_span");
  var pwdInp = document.getElementById("pwd");
  var pwdSpan = document.getElementById("pwd_span");
  var phoneInp = document.getElementById("phone");
  var phoneSpan = document.getElementById("phone_span");
  var emailInp = document.getElementById("email");
  var emailSpan = document.getElementById("email_span");
  var codeInp = document.getElementById("code");
  var codeSpan = document.getElementById("code_span");
  var createCode = document.getElementById("createCode");

  var regBtn = document.getElementById("regBtn");

  var isUserOk = false;
  var isPwdOk = false;
  var isPhoneOk = false;
  var isEmailOk = false;
  var isCodeOk = false;

  createCode.innerText = randCode();
  createCode.onclick = function () {
    createCode.innerText = randCode();
  }

  // 一步到位
  userInp.onblur = function () {
    isUserOk = false;
    var user = userInp.value.trim();
    userInp.value = user;

    var userReg = /^[a-zA-Z_$][\w$]{5,11}$/;

    if (userReg.test(user)) {
      var userList = getUserList();
      if (userList.indexOf(user) == -1) {
        userSpan.textContent = "√";
        userSpan.className = "right";
        isUserOk = true;
      } else {
        userSpan.textContent = "* 该用户名已注册";
        userSpan.className = "err";
      }
    } else {
      userSpan.textContent = "* 用户名由数字,大小写字母,下划线,$组成,6-12位,且不能以数字开头";
      userSpan.className = "err";
    }
  }
  pwdInp.onblur = function () {
    var pwd = pwdInp.value.trim();
    isPwdOk = false;

    var pwdReg = /^[\w$]{6,12}$/;

    if (pwdReg.test(pwd)) {
      pwdSpan.textContent = "√";
      pwdSpan.className = "right";

      var isExistNum = false;
      var isExistSmall = false;
      var isExistBig = false;
      var isExistSpe = false;

      if (/[0-9]/.test(pwd)) isExistNum = true;
      if (/[a-z]/.test(pwd)) isExistSmall = true;
      if (/[A-Z]/.test(pwd)) isExistBig = true;
      if (/[_$]/.test(pwd)) isExistSpe = true;

      // var isExistNum = /[0-9]/.test(pwd) ? true :false;

      var sum = isExistNum + isExistSmall + isExistBig + isExistSpe;

      //  true + true + false

      switch (sum) {
        case 1:
          pwdSpan.innerText = "密码强度:弱";
          pwdSpan.style.color = "green";
          break;
        case 2:
          pwdSpan.innerText = "密码强度:中";
          pwdSpan.style.color = "orange";
          break;
        case 3:
          pwdSpan.innerText = "密码强度:强";
          pwdSpan.style.color = "yellow";
          break;
        case 4:
          pwdSpan.innerText = "密码强度:超强";
          pwdSpan.style.color = "gold";
          break;
      }

      isPwdOk = true;

    } else {
      pwdSpan.textContent = "* 密码由数字,大小写字母,下划线,$组成,6-12位";
      pwdSpan.className = "err";
    }
  }

  // 一步到位
  phoneInp.onblur = function () {
    isPhoneOk = false;
    var phone = phoneInp.value.trim();
    phoneInp.value = phone;

    var phoneReg = /^1[3-9]\d{9}$/;

    if (phoneReg.test(phone)) {
      var phoneList = getPhoneList();
      if (phoneList.indexOf(phone) == -1) {
        phoneSpan.textContent = "√";
        phoneSpan.className = "right";
        isPhoneOk = true;
      } else {
        phoneSpan.textContent = "* 该手机号已注册";
        phoneSpan.className = "err";
      }
    } else {
      phoneSpan.textContent = "* 手机号码格式不正确";
      phoneSpan.className = "err";
    }
  }

  emailInp.onblur = function () {
    isEmailOk = false;
    var email = emailInp.value.trim();
    emailInp.value = email;

    var emailReg = /^\w+@\w+\.(com|cn|email)$/;

    if (emailReg.test(email)) {
      var emailList = getEmailList();
      if (emailList.indexOf(email) == -1) {
        emailSpan.textContent = "√";
        emailSpan.className = "right";
        isEmailOk = true;
      } else {
        emailSpan.textContent = "* 该邮箱已注册";
        emailSpan.className = "err";
      }
    } else {
      emailSpan.textContent = "* 邮箱格式有误";
      emailSpan.className = "err";
    }
  }

  codeInp.onblur = function () {
    isCodeOk = false;
    var code = codeInp.value.trim();
    codeInp.value = code;

    var RCode = createCode.innerText;   //随机的验证码
    var codeReg = new RegExp(`^${RCode}$`, "i");

    if (codeReg.test(code)) {
      codeSpan.textContent = "√";
      codeSpan.className = "right";
      isCodeOk = true;
    } else {
      codeSpan.textContent = "* 验证码有误";
      codeSpan.className = "err";
    }
  }
  var count = 0;
  regBtn.onclick = function () {
    if (isUserOk && isPwdOk && isPhoneOk && isEmailOk && isCodeOk) {
      // alert("注册成功");
      var user = userInp.value;
      var pwd = pwdInp.value;
      var phone = phoneInp.value;
      var email = emailInp.value;

      // 单用户注册  键名相同 => 后注册的会覆盖之前注册的 => cookie只能存一条
      // setCookie("user",user,7);
      // setCookie("pwd",pwd,7);
      // setCookie("phone",phone,7);
      // setCookie("email",email,7);

      // 多用户注册  => 键名不能相同

      // 1. 计数法  => 刷新页面变量会重置为 0  => 重新从0覆盖
      // count++;
      // setCookie("user_"+count,user,7);
      // setCookie("pwd_"+count,pwd,7);
      // setCookie("phone_"+count,phone,7);
      // setCookie("email_"+count,email,7);

      // 2. 用户名作为后缀
      // 用户名 a123123
      // user_a123123
      // pwd_a123123
      // phone_a123123
      // email_a123123

      setCookie("user_" + user, user, 7);
      setCookie("pwd_" + user, pwd, 7);
      setCookie("phone_" + user, phone, 7);
      setCookie("email_" + user, email, 7);


      location.href = "./login2.html";
    }
  }

  function getUserList() {
    var arr = [];
    var cookie = document.cookie;
    if (cookie) {  //有cookie时
      var list = cookie.split("; ");
      for (var i = 0; i < list.length; i++) {
        var item = list[i]; // "user_a123123=a123123", "pwd_a123123=123123",
        var key = item.split("=")[0];
        var val = item.split("=")[1];
        if (key.startsWith("user_")) {
          arr.push(val);
        }
      }
    }
    return arr;
  }

  function getPhoneList() {
    var arr = [];
    var cookie = document.cookie;
    if (cookie) {  //有cookie时
      var list = cookie.split("; ");
      for (var i = 0; i < list.length; i++) {
        var item = list[i]; // "user_a123123=a123123", "pwd_a123123=123123",
        var key = item.split("=")[0];
        var val = item.split("=")[1];
        if (key.startsWith("phone_")) {
          arr.push(val);
        }
      }
    }
    return arr;
  }

  function getEmailList() {
    var arr = [];
    var cookie = document.cookie;
    if (cookie) {  //有cookie时
      var list = cookie.split("; ");
      for (var i = 0; i < list.length; i++) {
        var item = list[i]; // "user_a123123=a123123", "pwd_a123123=123123",
        var key = item.split("=")[0];
        var val = item.split("=")[1];
        if (key.startsWith("email_")) {
          arr.push(val);
        }
      }
    }
    return arr;
  }







</script>


</html>